<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="page-view-size" content="1280*720" />
    <link rel="stylesheet" href="style/base.css" />
    <title>熊猫部落-商品详情</title>
    <style>
      body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 1280px;
        height: 720px;
        background-repeat: no-repeat;
        background-color: transparent;
        overflow: hidden;
      }
      #main-0 {
        position: absolute;
        width: 600px;
        height: 340px;
        top: 140px;
        left: 40px;
        overflow: hidden;
      }
      #detail {
        position: absolute;
        width: 560px;
        top: 140px;
        left: 680px;
      }
      #detail .info {
        position: absolute;
        top: 90px;
        height: 170px;
        font-size: 20px;
        color: #fff;
        line-height: 34px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
      }
      #detail .title {
        position: absolute;
        width: 100%;
        overflow: hidden;
        height: 40px;
        font-size: 28px;
        color: #fff;
        overflow: hidden;
      }
      #detail .price {
        position: absolute;
        top: 50px;
        font-size: 20px;
        color: #fff;
        line-height: 30px;
        height: 30px;
      }
      #detail .price span {
        display: inline-block;
        vertical-align: middle;
        color: #f40;
        letter-spacing: 2px;
        line-height: 30px;
        height: 30px;
      }
      #btn {
        position: absolute;
        width: 177px;
        height: 63px;
        background: url(./images/confirm.png);
        left: 680px;
        top: 415px;
        display: none;
      }
      #dialog .item-group {
        width: 100%;
        position: absolute;
        text-align: center;
      }
      #dialog .item {
        /* position: absolute; */
        display: inline-block;
        width: 148px;
        height: 61px;
        margin: 0 5px;
      }
      #dialog .item.focus{
        border: 0 none !important;
        transform: scale(1) !important;
      }
      #dialog .item-0 {
        left: 480px;
        top: 460px;
        background-position: left -61px;
      }
      #dialog .item-0.focus {
        background-position: left 0;
      }
      #dialog .item-1 {
        left: 640px;
        top: 460px;
        background-position: left -183px;
      }
      #dialog .item-1.focus {
        background-position: left -122px;
      }
      #dialog .item-2 {
        left: 570px;
        top: 590px;
        background-position: left -305px;
      }
      #dialog .item-2.focus {
        background-position: left -244px;
      }
      #dialog .input {
        position: absolute;
        left: 615px;
        top: 478px;
        z-index: 1010;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        letter-spacing: 2px;
        width: 150px;
      }
      #dialog .qrcode {
        position: absolute;
        width: 120px;
        height: 120px;
        left: 50%;
        margin-left: -60px;
        top: 260px;
      }
    </style>
  </head>
  <body onload="init()">
    <div id="main">
	<!--联通不要 -->
      <div class='smallResolution' id="smallResolution"></div>
	  <!--联通不要 -->
      <div id="main-0"></div>
      <div id="detail"></div>
      <div id="btn"></div>
    </div>
    <div class="dialog" id="dialog"></div>
    <script src="js/jquery.js"></script>
    <script src="config/index.js"></script>
    <script src="api/index.js"></script>
    <script src="js/utlis.js"></script>
    <script src="js/KeyEnter.js"></script>
    <script src="js/event.js"></script>
    <script src="js/move.js"></script>
    <script src="js/log.js"></script>
    <script src="js/page.js"></script>
    <script src="js/unslider.js"></script>

    <script src="components/goods/dialog.js"></script>
    <script src="components/goods/detail.js"></script>
    <script>
      var hanlderEnter = {
        'dialog10': function () {
          var form = config.path + '/goods-detail.html?goodsId=' + page.data.goodsDetail.ID
          var to = config.path + '/mission.html'
          page.addUrl(to, form)
        },
        'dialog11': function () {
          dialog.hide()
        },
        'dialog20': function () {
          dialog.show(4)
        },
        'dialog30': function () {
          dialog.show(4)
        },
        'dialog31': function () {
          dialog.hide()
        },
        'dialog40': function () {
          if (dialog.checkPhone()) {
            orderPoints({
              phone: dialog.phone,
              account: config.userid,
              programId: page.data.goodsDetail.ID,
              programName: page.data.goodsDetail.name,
            })
            dialog.hide()
          } else {
            dialog.show(2)
          }
        }
      }


      function getPreFocus() {
        var goodsId = utils.getUrlParam("goodsId", "");
        goodsDetail.init(goodsId)
      }

      function init () {
        page.init()
        // dialog.init()
        getPreFocus()
        log.commit({
          name: '商品详情页面',
          type1: 'browse',
          type2: 'goods-detail',
          starttime: new Date().getTime(),
        })
      }

      function keyUp () {
        if (dialog.visible) return
        var dom = move.up();
        dom && utils.toggleClass(dom);
      }

      function keyDown () {
        if (dialog.visible) return
        var dom = move.down();
        dom && utils.toggleClass(dom);
      }

      function keyLeft () {
        if (!dialog.visible) return
        var dom = move.left();
        dom && utils.toggleClass(dom);
      }

      function keyRight () {
        if (!dialog.visible) return
        var dom = move.right();
        dom && utils.toggleClass(dom);
      }

      function keyEnter () {
        if (dialog.visible) {
          var info = utils.getCurInfo()
          if (info && dialog.type) {
            var fn = hanlderEnter['dialog' + dialog.type + info.index]
            typeof fn == 'function' && fn()
          }
          
        } else {
          var goods = page.data.goodsDetail
          var countPonit = getPoints().data
          // 商家价格大，不能兑换
          if (parseFloat(countPonit.surplusCoin) < parseFloat(goods.price)) {
            dialog.show(1)
          } else {
            dialog.show(3)
          }
        }
      }

      function keyBack () {
        if (dialog.visible) {
          if (dialog.type == 4)  {
            var html = $('#dialog .input').html()
            if (html.length) {
              $('#dialog .input').html(html.substring(0, html.length - 1))
            }
          } else if (dialog.type == 2) {
            dialog.show(4)
          } else {
            dialog.hide()
          }
        } else {
          page.goback()
        }
      }


      function keyZore() {
        dialog.renderInput('0');
      }

      function keyOne() {
        dialog.renderInput('1');
      }

      function keyTwo() {
        dialog.renderInput('2');
      }

      function keyThree() {
        dialog.renderInput('3');
      }

      function keyFour() {
        dialog.renderInput('4');
      }

      function keyFive() {
        dialog.renderInput('5');
      }

      function keySix() {
        dialog.renderInput('6');
      }

      function keySeven() {
        dialog.renderInput('7');
      }

      function keyEight() {
        dialog.renderInput('8');
      }

      function keyNine() {
        dialog.renderInput('9');
      }
    </script>
  </body>
</html>
